<template>
  <div class="deit-link">
    <div class="link-left">
      <attr-nav
        :dataList="dataList"
        :activeIndex="activeIndex"
        @click="handleClick"
      />
    </div>
    <div class="link-right">
      <input v-show="activeIndex===0" v-model="inputValue.web" type="text" @change="inputChange($event)">
      <input v-show="activeIndex===1" v-model="inputValue.file" type="text">
      <div class="link-list">
        <div class="title">历史记录</div>
        <div v-show="activeIndex===0" class="list ov">
          <div
            v-for="(item,index) in listWeb"
            :key="index"
            class="list-item"
            :class="{active:highlight === index}"
            @click="handleListClick(item,index)"
          >
            <span>{{item.name}}</span>
            <a class="h-a" @click.stop="handleDeleteClick(item,index)">
              <img src="statics/icons/app/icondelete2.png" alt="" srcset="">
            </a>
          </div>
        </div>
        <div v-show="activeIndex===1" class="list ov">
          <div
            v-for="(item,index) in listFile"
            :key="index"
            class="list-item"
            :class="{active:highlight === index}"
            @click="handleListClick(item,index)"
          >
            <span>{{item.name}}</span>
            <a class="h-a" @click.stop="handleDeleteClick(item,index)">
              <img src="statics/icons/app/icondelete2.png" alt="" srcset="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AttrNav  from './AttrNav';
export default {
  name: 'edit-link',
  components: {
    "attr-nav": AttrNav
  },
  data() {
    return {
      dataList: [
        { name: "网址", key: 'web' },
        { name: "文件", key: 'file' }
      ],
      activeIndex: 0,
      highlight: -1,
      inputValue: {
        web: 'http:////',
        file: 'file:\\D:\\华望\\产品设计'
      },
      listFile: [],
      listWeb: [
        {
          name: 'http:////qq.com',
          key: 0
        },
        {
          name: 'http:////aiqiyi.com',
          key: 1
        }
      ]
    };
  },
  methods: {
    inputChange(event) {

    },
    handleDeleteClick(data, idnex) {
    },
    handleListClick(data, idnex){
      this.highlight = idnex;
    },
    handleClick(index) {
      this.activeIndex = index;

    }
  },
};
</script>
<style lang="scss" scope>
@import '~statics/styles/flex.scss';

.deit-link {
  font-size: 12px;
  position: relative;
  display: flex;
  .link-left {
    width: 195px;
  }
  .link-right {
    flex: 1;
    input {
      outline: 0;
      width: 100%;
      height: 26px;
      line-height: 26px;
      padding: 0 4px;
      color:rgba(0,0,0,1);
      background:rgba(255,255,255,1);
      border:1px solid rgba(24,144,255,1);
    }
    .link-list {
      height: 418px;
      .title {
        font-weight:600;
        color:rgba(0,0,0,1);
        line-height:24px;
        background:rgba(246,252,255,1);
        padding-left: 3px;
      }
      .list-item {
        overflow: hidden;
        line-height: 26px;
        height: 26px;
        padding-left: 6px;
        padding-right: 10px;
        cursor: pointer;
        span {
          display: block;
          line-height: 25px;
          float: left;
        }
        a {
          float: right;
          cursor: pointer;
          margin-top: 5px;
        }
      }
      .active {
        background:rgba(52,131,184,1);
        color: #ffffff;
      }
    }
  }
}
</style>
